<template>
    <div class="app-container editcss">
        <div class="titleHeight">
            <el-button type="primary" size="small" class=" mb15"
                v-repeatStop="{ func: add, delay: '2000' }" icon="el-icon-plus">新增</el-button>
        </div>
        <el-table :data="tableData" :height="endHeight"
            style="width: 100%;" row-key="id" border
            :tree-props="{ children: 'child', hasChildren: 'hasChildren' }" v-loading="loading"
            element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
             >
            <el-table-column type="index" width="50" align="center"></el-table-column>
            <el-table-column label="菜单名称" min-width="150">
                <template slot-scope="scope">
                    {{ scope.row.name }}
                </template>
            </el-table-column>
            <el-table-column label="菜单图标" align="center" min-width="150">
                <template slot-scope="scope">
                    {{ scope.row.icon }}
                </template>
            </el-table-column>
            <el-table-column label="路由地址" align="center" min-width="150">
                <template slot-scope="scope">
                    {{ scope.row.url }}
                </template>
            </el-table-column>
            <el-table-column label="路由参数" align="center" width="200">
                <template slot-scope="scope">
                    {{ scope.row.query }}
                </template>
            </el-table-column>
            <el-table-column label="组件路径" align="center" width="200">
                <template slot-scope="scope">
                    {{ scope.row.controller }}
                </template>
            </el-table-column>
            <!-- <el-table-column label="菜单类型" align="center">
                <template slot-scope="scope">
                    {{ menuTypeArr[scope.row.menuType == 'M' ? 0 : (scope.row.menuType == 'C' ? 1 : 2)].label }}
                </template>
            </el-table-column>
            <el-table-column label="菜单标识" align="center">
                <template slot-scope="scope">
                    {{ scope.row.perms }}
                </template>
            </el-table-column>
            <el-table-column label="菜单状态" align="center">
                <template slot-scope="scope">
                    {{ statusArr[scope.row.status].label }}
                </template>
            </el-table-column>
            <el-table-column label="是否显示" align="center">
                <template slot-scope="scope">
                    {{ visibleArr[scope.row.visible].label }}
                </template>
            </el-table-column> -->
            <el-table-column label="操作" align="center" fixed="right" width="200">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="edit(scope.row)" icon="el-icon-edit"
                        circle></el-button>
                    <el-button type="warning" size="small" @click="viewHeld(scope.row)" icon="el-icon-view"
                        circle></el-button>
                    <!-- <el-button type="danger" size="small" @click="del(scope.row)" icon="el-icon-delete"
                        circle></el-button> -->

                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="newedit == 0 ? '新增菜单' : (newedit == 1 ? '编辑菜单' : '查看详情')" :visible.sync="dialogFormVisible"
            custom-class="customclassdialog">
            <el-form :model="form" ref="from" :label-width="formLabelWidth">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="菜单名称:">
                            <el-input v-model="form.name" clearable autocomplete="off"
                                :readonly="newedit == 2 ? true : false" placeholder="请输入菜单名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单图标:">
                            <el-input v-model="form.icon" clearable autocomplete="off"
                                :readonly="newedit == 2 ? true : false" placeholder="请输入图标名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="上级菜单:">
                            <!-- <el-select v-model="form.parentId" clearable :readonly="newedit==2?true:false" placeholder="选择上级菜单" style="width: 100%;">
                  <template v-for="(item, index) in fullData">
                    <el-option :label="item.menuName" :value="item.menuId"></el-option>
                  </template>
                </el-select> -->
                            <treeselect v-model="form.pid" placeholder="选择上级菜单" :single="true" :clearable="true"
                                :options="fullData" style="line-height: normal;" :readonly="newedit == 2 ? true : false"
                                @select="treeselectHeld" :normalizer="normalizer" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="菜单类型:">
                            <el-select v-model="form.menuType" :readonly="newedit == 2 ? true : false"
                                placeholder="选择菜单类型" style="width: 100%;" :option="menuTypeArr">
                                <template v-for="(item, index) in menuTypeArr">
                                    <el-option :label="item.label" :value="item.value"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                    <!-- <el-col :span="12" v-if="form.menuType == 'F'">
                        <el-form-item label="权限标识:">
                            <el-input v-model="form.perms" clearable autocomplete="off"
                                :readonly="newedit == 2 ? true : false" placeholder="请输入权限标识"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12" v-if="form.menuType != 'F'">
                        <el-form-item label="路由地址:"><el-input v-model="form.url" :readonly="newedit == 2 ? true : false"
                                clearable placeholder="/路由地址"></el-input></el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.menuType != 'F'">
                        <el-form-item label="组件路径:"><el-input v-model="form.controller"
                                :readonly="newedit == 2 ? true : false" clearable
                                placeholder="/路径名"></el-input></el-form-item>
                    </el-col>
                    <!-- <el-col :span="12" v-if="form.menuType != 'F'">
                        <el-form-item label="路由参数:"><el-input v-model="form.query"
                                :readonly="newedit == 2 ? true : false" clearable
                                placeholder=":参数"></el-input></el-form-item>
                    </el-col> -->
                    <!-- <el-col :span="12">
                        <el-form-item label="菜单状态:">
                            <el-select v-model="form.status" :readonly="newedit == 2 ? true : false"
                                placeholder="选择菜单状态" style="width: 100%;">
                                <template v-for="(item, index) in statusArr">
                                    <el-option :label="item.label" :value="item.value"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                    <!-- <el-col :span="12">
                        <el-form-item label="是否显示:">
                            <el-select v-model="form.visible" :readonly="newedit == 2 ? true : false"
                                placeholder="选择是否显示" style="width: 100%;">
                                <template v-for="(item, index) in visibleArr">
                                    <el-option :label="item.label" :value="item.value"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="排序:">
                            <el-input v-model="form.sort" clearable autocomplete="off"
                                :readonly="newedit == 2 ? true : false" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关 闭</el-button>
                <el-button v-if="newedit !== 2" type="primary" icon="el-icon-finished" @click="submit">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { menuList, menuDelete, menuAdd, menuUpdata, getmenuUpdata } from '@/api/menu'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    name: 'WorkspaceJsonAdminmenu',
    components: { Treeselect },
    data() {
        return {
            loading: true,
            endHeight: 0,
            newedit: 0,
            tableData: [],
            fullData: [],
            statusArr: [
                {
                    label: '正常',
                    value: 0,
                },
                {
                    label: '停用',
                    value: 1,
                },
            ],
            visibleArr: [
                {
                    label: '显示',
                    value: 0,
                },
                {
                    label: '隐藏',
                    value: 1,
                },
            ],
            menuTypeArr: [
                {
                    label: '目录',
                    value: 'M',
                },
                {
                    label: '菜单',
                    value: 'C',
                },
                {
                    label: '按钮',
                    value: 'F',
                },
            ],
            form: {
                menuName: '',
                parentId: null,
                path: '',
                query: '',
                status: 0,
                visible: 0,
                icon: '',
                component: '',
                sort: 0
            },
            formLabelWidth: '120px',
            dialogFormVisible: false,
            normalizer(node) {
                if (node.id == 0) {
                    node.name = '请选择上级菜单'
                }
                if (node.child && !node.child.length) {
                    delete node.child
                }
                return {
                    label: node.name,
                    children: node.child,
                }
            },
        }
    },
    mounted() {
        this.getInit()
        this.fetTableHeight()
    },
    methods: {
        treeselectHeld(e) {
            //   console.log(e, '菜单选择')
        },
        // initHeightFun() {
        //     return window.innerHeight - 120
        // },
        getInit() {
            let that = this
            menuList().then((res) => {
                if (res.code == 200) {
                    console.log(res);
                    that.loading = false
                    that.tableData = that.recursionFun(res.data)
                }
            })
        },
        resetHeight() {
            return new Promise((resolve, reject) => {
                this.endHeight = 0
                resolve()
            })
        },
        fetTableHeight() {
            this.resetHeight().then(res => {
                let fHeight = (window.getComputedStyle(document.querySelector('.editcss')).height).replace('px', "")
                let zHeight = (window.getComputedStyle(document.querySelector('.titleHeight')).height).replace('px', "")
                this.endHeight = (fHeight - zHeight-40)
            })
        },
        add() {
            let that = this
            that.newedit = 0
            that.dialogFormVisible = true
            that.form = {
                menuName: '',
                parentId: null,
                path: '',
                query: '',
                status: 0,
                visible: 0,
                icon: '',
                component: '',
            }
            // that.tableData.map(item => {
            //   if (item.parentId == 0) {
            //     that.fullData.push(item);
            //   }
            // });
        },
        viewHeld(row) {
            console.log(row)
            let that = this
            that.newedit = 2
            that.form = row
            that.dialogFormVisible = true
        },
        edit(row) {
            console.log(row)
            let that = this
            that.newedit = 1
            getmenuUpdata(row.id).then(res => {
                if (res.code == 200) {
                    that.form = res.data
                    that.dialogFormVisible = true

                }
            })
        },
        del(row) {
            let that = this
            console.log(row)
            that.$confirm('确认删除吗?删除后将无法恢复！', '删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                    menuDelete(row.menuId).then((res) => {
                        if (res.code === 200) {
                            that.getInit()
                            that.$modal.msgSuccess(res.message)
                        } else {
                            that.$modal.msgError(res.message)
                        }
                    })
                }).catch(() => {
                    that.$modal.msg('删除取消')
                })
        },
        submit() {
            let that = this
            if (that.form.pid == '') {
                that.form.pid = 0
            }
            if (that.form.id) {
                delete that.form.created_at
                delete that.form.is_deleted
                delete that.form.updated_at
                menuUpdata(that.form).then((res) => {
                    if (res.code == 200) {
                        that.getInit()
                        that.$Toast('修改成功')
                    } else {
                        that.$Toast(res.message)
                    }
                })
            } else {
                menuAdd(that.form).then((res) => {
                    if (res.code == 200) {
                        that.getInit()
                        that.$Toast('添加成功')
                    } else {
                        that.$Toast(res.message)
                    }
                })
            }
            that.dialogFormVisible = false
            console.log(that.form, that.form.id)
        },
        // 处理菜单结构
        recursionFun(dataArray) {
            console.log(dataArray, '初始化')
            let that = this
            let arr = []
            let arrayzjd = []
            // dataArray.map((item) => {
            //     item.label = item.name
            //     item.children = []
            //     if (item.child) {
            //         item.child.map(v => {
            //             v.label = v.name
            //         })
            //         item.children = item.child
            //     }
            //     // if (item.pid == 0) {
            //     //     arr.push(item)
            //     // }
            //     // dataArray.map((v) => {
            //     //     if (v.pid == item.id) {
            //     //         item.children.push(v)
            //     //     }
            //     // })
            // })
            let fullArr = JSON.parse(JSON.stringify(dataArray))
            // fullArr.map((item) => {
            //     item.child.map((v) => {
            //         delete v.child
            //         //   if (v.children.length == 0) {
            //         //     delete v.children
            //         //   }
            //     })
            // })
            // that.fullData = fullArr
            // console.log(dataArray);
            fullArr.map((item) => {
                if (item.child) {
                    item.child.map((v) => {
                        delete v.child
                        //   if (v.children.length == 0) {
                        //     delete v.children
                        //   }
                    })
                }

            })
            that.fullData = dataArray
            return dataArray
        },
        // recursionFun(dataArray) {
        //     console.log(dataArray, '初始化')
        //     let that = this
        //     let arr = []
        //     let arrayzjd = []
        //     dataArray.map((item) => {
        //         item.label = item.menuName
        //         item.id = item.menuId
        //         item.children = []
        //         if (item.parentId == 0) {
        //             arr.push(item)
        //         } else {
        //             arrayzjd.push(item)
        //         }
        //         dataArray.map((v) => {
        //             if (v.parentId == item.menuId) {
        //                 item.children.push(v)
        //             }
        //         })
        //     })
        //     let fullArr = JSON.parse(JSON.stringify(arr))
        //     fullArr.map((item) => {
        //         item.children.map((v) => {
        //             delete v.children
        //             //   if (v.children.length == 0) {
        //             //     delete v.children
        //             //   }
        //         })
        //     })
        //     that.fullData = fullArr
        //     return arr
        // },

    },
}
</script>

<style lang="scss" scoped>
// @keyframes fadeIn {
//     from {
//         opacity: 0;
//         transform: translateY(-100%);
//     }

//     to {
//         opacity: 1;
//         transform: translateY(0px);
//     }
// }

// ::v-deep .customclassdialog {
//     border-radius: 10px !important;
//     animation: fadeIn 1s ease-in-out forwards;
// }

.el-icon-arrow-right:before {
    content: '\e6d9';
}

.el-table__expand-icon--expanded .el-icon-arrow-right:before {
    content: '\e6d8' !important;
}

.el-table__expand-icon--expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.el-table__expand-icon {
    border: 1px solid #e3e3e3;
}

// .el-dialog__wrapper {
//     display: flex;
//     align-items: center;
//     justify-content: center;
// }</style>
